<template>
    <div>
      <!--    <el-col :span="15">-->
      <el-col :span="24">
        <div class="infraredRemote">
          <div class="top" ref="showScreen">
            <div style="height: 16px">
              <el-row ref="model" :gutter="20" style="padding-left: 65px;padding-top: 20px">
                <el-col :span="4"><a>自动</a></el-col>
                <el-col :span="4"><a>制冷</a></el-col>
                <el-col :span="4"><a>除湿</a></el-col>
                <el-col :span="4"><a>送风</a></el-col>
                <el-col :span="4"><a>制热</a></el-col>
              </el-row>
  
              <div style="padding-top:20px;text-align: center">
                <i v-show="windSpeedIconShow" class="el-icon-orange"></i>
                <i v-show="sweepWindShow!=''" style="font-size: 20px;color:#157833" class="el-icon-medal"></i>
                <i v-show="temperIconShow" class="el-icon-hot-water"></i>
              </div>
              <el-row style="height: 100px;padding-left: 110px;padding-top: 0px">
                <el-col class="mainScreen" :span="7"
                        style="margin-left: -100px;">
                  <a>
                    {{ windSpeedShow }}
                  </a>
                </el-col>
                <el-col class="mainScreen" style="margin-left: 50px" :span="7">
                  <a>
                    {{ sweepWindShow }}
                  </a>
                </el-col>
                <el-col class="mainScreen" :span="2"
                        style="margin-left: 100px;text-align: right">
                  <a v-show="temperatureShow.value!==''">
                    {{ temperatureShow.value + "°" }}
                  </a>
  
                </el-col>
              </el-row>
  
            </div>
          </div>
          <div class="general">
            <el-col :span="4">
              <a style="font-size: 15px;">电源:</a>
            </el-col>
            <el-col :span="10">
              <el-button :disabled="COStatus" class="custom-btn" type="success" @click="electricityPower(0x00)">开机
              </el-button>
            </el-col>
            <el-col :span="10">
              <el-button :disabled="isDisabled" type="danger" @click="electricityPower(0x01)">关机</el-button>
            </el-col>
          </div>
          <div class="general">
            <el-col :span="4">
              <a style="font-size: 15px;">模式:</a>
            </el-col>
            <el-row style="padding-left: 65px">
              <el-col :span="4">
                <el-button :disabled="isDisabled" @click="model(0x00)" type="warning">自动</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="isDisabled" type="primary" @click="model(0x01)">制冷</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="isDisabled" type="info" @click="model(0x02)">除湿</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="isDisabled" type="success" @click="model(0x03)">送风</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="isDisabled" type="danger" @click="model(0x04)">制热</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="general">
            <el-col :span="4">
              <a style="font-size: 15px;">温度:</a>
            </el-col>
            <el-col :span="4">
              <el-button :disabled="isDisabled" type="success" @click="temperatureSetting(0x00)">温度<i
                class="el-icon-top"></i></el-button>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model="instructionVO.infraredSocketVO.temperature"
                :disabled="temperatureInput"
                style="padding-left: 16px;width: 120px" placeHolder="请输入温度"
                type="number"
                @clear="clearNumber"
                :clearable="true"
                @blur="numberChange"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-button :disabled="isDisabled" type="danger" @click="temperatureSetting(0x01)">温度<i
                class="el-icon-bottom"></i></el-button>
            </el-col>
          </div>
          <div class="general">
            <el-col :span="4">
              <a style="font-size: 15px;">风速:</a>
            </el-col>
            <el-row style="padding-left: 65px;">
              <el-col :span="4">
                <el-button :disabled="isDisabled" type="warning" @click="windSpeed(0x00)">自动</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="isDisabled" type="primary" @click="windSpeed(0x01)">低风</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="isDisabled" type="primary" @click="windSpeed(0x02)">中风</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="isDisabled" type="primary" @click="windSpeed(0x03)">高风</el-button>
              </el-col>
              <!--            <el-col :span="4">-->
              <!--              <el-button :disabled="isDisabled" type="primary" @click="windSpeed(0x04)">强风</el-button>-->
              <!--            </el-col>-->
            </el-row>
          </div>
          <div class="general">
            <el-col :span="4">
              <a style="font-size: 15px;">扫风:</a>
            </el-col>
            <el-col :span="5">
              <el-button :disabled="isDisabled" type="warning" @click="autoDirect">自动</el-button>
            </el-col>
            <el-col :span="5">
              <el-button :disabled="isDisabled" type="primary" @click="handDirect">手动</el-button>
            </el-col>
            <el-col :span="5">
              <el-button :disabled="isDisabled" style="width: 100px" type="info" @click="upDownDirect">上下扫风</el-button>
            </el-col>
            <el-col :span="5">
              <el-button :disabled="isDisabled" style="width: 100px" type="success" @click="leftRightDirect">左右扫风</el-button>
            </el-col>
          </div>
  
          <!--        <div class="infraredRemoteRight">-->
          <div class="bottom" style="width: 500px;margin-top: 20px">
            <el-row>
              <a style="font-size: 15px;">设置遥控器:</a>
            </el-row>
            <el-row style="padding-top: 20px;padding-left: 20px">
              <label>用电设备:&nbsp;&nbsp;</label>
              <el-input readonly style="width: 30%" value="空调"></el-input>
            </el-row>
  
            <el-row style="padding-top: 20px;padding-left: 20px" :gutter="20">
              <el-col :span="16">
                <label>遥控器kfid:</label>
                <el-input
                  :maxlength="4"
                  v-model="controlBrandId"
                  @input="validateInput"
                  show-word-limit
                  clearable
                  placeHolder="请输入kfid:"
                  style="width: 47%;"/>
              </el-col>
  
              <el-col :span="8">
                <el-button
                  style="width: 100px"
                  type="success"
                  @click="handMatch">
                  {{ handMatchText }}
                </el-button>
              </el-col>
            </el-row>
  
            <el-row style="padding-top: 20px;padding-left: 20px">
              <el-col :span="16">
                <label>红外插座: &nbsp;</label>
                <el-select @change="changeDev" v-model="queryParams.mac" filterable placeholder="请选择在线设备" clearable :style="{ width: '180px' }">
                  <el-option v-for="item in onlineDevList" :key="item.devMac" :label="item.devMac"
                    :value="item.devMac"></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-button style="width: 100px;margin-left: 14px"
                           type="success"
                           @click="intelligentMatch"
                >
                  {{ matchBtnText }}
                </el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </div>
  </template>
  
  <script>


  import {getOnlineMac} from "@/api/alm/home/home";
  import {getType} from "@/api/devTypeMap";
  import {getInfraredSocketMacByUserName, getInfraredSocketLastTimeStatus, insertOrUpdateRecord, sendInfraredInstruction, listInfraredSocket, getModel} from "@/api/alm/infrared/infrared";
  import {getDevInfoList} from "@/api/alm/dev-debug/dev-network-manage/dev-network-manage";

  export default {
    data() {
      return {
        onlineDevList: [],
        queryParams: {
        pageNum: 1,
        pageSize: 10,
        mac: null,
        devType: null,
        msgid: null,
      },
        tempInfraredSocket: "",
        matchBtnText: "智能匹配",
        handMatchText: "手动匹配",
        //开关机状态
        COStatus: false,
        temperatureInput: false,
        isDisabled: false,
        controlBrandId: '',
        infraredSocketOption: {
          type: Array
        },
        windSpeedShow: "AUTO",
        sweepWindShow: "",
        windSpeedIconShow: true,
        temperIconShow: true,
        temperatureShow: {
          value: '',
        },
        autoModel: false,
        instructionVO: {
          instructionData: [],
          infraredSocketVO: {
            id: '',
            deviceId: '',
            temperature: ''
          }
        },
        currentModel: '',
        functionType: {
          intelligentMatch: 0x10,
          handMatch: 0x11,
          electricityPower: 0x12,
          model: 0x13,
          temperatureControl: 0x14,
          windSpeed: 0x15,
          autoSweepWind: 0x16,
          handSweepWind: 0x17,
          upDownSweepWind: 0x18,
          leftRightSweepWind: 0x19,
        },
        //自动风向点击计数器
        // auClickCount: 0,
        auClickCount: {
          count: 0
        },
        //手动风向点击计数器
        hdClickCount: {
          count: 0,
        },
        //上下扫风点击计数器
        udClickCount: {
          count: 0
        },
        //左右扫风点击计数器
        lrClickCount: {
          count: 0,
        },
        //上一次执行的方法
        // lastTimeExecFunction: '',
        lastTimeExecFunction: {
          name: '',
        },
        //用户操作红外插座记录对象
        userOperateISR: {
          infraSocketDeviceId: ''
        },
      }
    },
    created() {
      this.getOnlineDevMacList();
      this.getOperateRecord();
      this.getDevInfoList();
    },
    mounted() {
  
    },
    methods: {
      validateInput(value) {
        // 只允许输入数字和字母
        const reg = /^[0-9a-zA-Z]*$/
        if (!reg.test(value)) {
          this.controlBrandId = "";
        }
      },
      getOperateRecord() {
        getInfraredSocketMacByUserName().then(res => {
          console.log("getInfraredSocketMacByUserName()",res.data.deviceId)
          let exists = this.onlineDevList.some(dev => dev.devMac === res.data.deviceId);
          console.log("infread is exist?", res.data != null && exists)
          if (res.data != null && exists) {
            this.tempInfraredSocket = res.data.deviceId;
            this.changeDev(res.data.deviceId)
            this.instructionVO.infraredSocketVO.deviceId = res.data.deviceId;
            this.instructionVO.infraredSocketVO.id = res.data.id;
            // this.getLastTimeStatus(res.data.deviceId);
          } else {
            this.tempInfraredSocket = "";
            this.changeDev("")
            this.infraredSocketOption = [];
            // this.getLastTimeStatus("")
          }
        })
      },
      getDevInfoList() {
        getDevInfoList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.devInfoList = response.rows
          this.total = response.total
          this.devInfoList.forEach(element => {
            if(element.deviceId == this.queryParams.mac) {      
              this.queryParams.devType = element.devType
              // console.log(this.queryParams.devType) 
            }
          });
        });
      },
      // //获取在线设备列表
      // getOnlineDevMacList() {
      //   getOnlineMac().then(res => {
      //     this.onlineDevList = res.data;
      //     if(this.onlineDevList.length > 0) {
      //       this.queryParams.mac = this.onlineDevList[0].devMac
      //     }
      //   })
      // },
      //切换设备
      changeDev(e) {
        let mac = JSON.parse(JSON.stringify(e));
        this.queryParams.mac = mac
        this.instructionVO.infraredSocketVO.deviceId = mac;
        console.log("changeDev", this.instructionVO.infraredSocketVO.deviceId)
        this.devInfoList.forEach(element => {
          if(element.deviceId == this.queryParams.mac) {           
            this.queryParams.devType = element.devType ? (element.devType).toString(16) : ''
          }
        })
        this.infraredSocketOption = [];
        this.saveOrUpdateISR(e === "" ? null : e);
        // this.getLastTimeStatus(e);
      },
      disableButton(flag) {
        this.isDisabled = flag;
        this.temperatureInput = flag;
      },
      //获取在线设备列表
      getOnlineDevMacList() {
        getOnlineMac().then(res => {
            this.onlineDevList = res.data;
            if(this.onlineDevList.length > 0) {
                this.queryParams.mac = ""
            }
        })
       },
      /**
       * 获取红外插座上一次操作记录
       * 用于回显上一次空调状态
       */
      // getLastTimeStatus(deviceId) {
      //   console.log('getLastTimeStatus1' , deviceId)
      //   let obj = {};
      //   obj.infraSocketDeviceId = deviceId
      //   getInfraredSocketLastTimeStatus(obj).then(res => {
      //     console.log('getLastTimeStatus', res)
      //     //判断匹配状态
      //     if (res.data.matchStatus != null) {
      //       this.matchBtnText = "重新智能匹配";
      //       this.handMatchText = "重新手动匹配"
      //       //已匹配 判断是否开机
      //       if (res.data.isOpen) {
      //         this.$refs.model.$children.forEach(item => {
      //           item.$el.children[0].style = undefined;
      //         })
      //         this.$refs.model.$children[res.data.modelOrdinal]
      //           .$el.children[0].style.color = "#409eff";
      //         this.currentModel = res.data.modelOrdinal;
      //         this.autoModel = res.data.modelOrdinal == 0;
      //         this.temperatureShow.value = res.data.temperature;
      //         this.instructionVO.infraredSocketVO.temperature = res.data.temperature;
      //         let wSpeed = res.data.windSpeed;
      //         this.windSpeedShow = wSpeed.length > 4 ? wSpeed.substring(0, 4) : wSpeed;
      //         this.sweepWindShow = res.data.sweepWind;
      //         this.commonHandler(
      //           false
      //           , false
      //           , "#ebb563"
      //           , true
      //           , true);
      //       } else {
      //         //未开机 禁用所有按钮和温度输入 除了开机按钮
      //         this.commonHandler(
      //           false
      //           , true
      //           , 'black'
      //           , false
      //           , false);
      //       }
      //     } else {
      //       this.commonHandler(
      //         true
      //         , true
      //         , 'black'
      //         , false
      //         , false);
      //     }
      //   });
      // },
      /**
       * 处理冗余代码
       * @param COStatus boolean 是否禁用=>开机btn
       * @param flag boolean 是否禁用所有btn
       * @param color string backgroundColor
       * @param windSpeedIconShow boolean 风速图标是否显示
       * @param temperIconShow boolean 温度图标是否显示
       */
      commonHandler(COStatus, flag, color, windSpeedIconShow, temperIconShow) {
        this.COStatus = COStatus;
        this.disableButton(flag);
        this.$refs.showScreen.style.backgroundColor = color;
        this.windSpeedIconShow = windSpeedIconShow;
        this.temperIconShow = temperIconShow;
      },
      /**
       * 是否要禁用所有按钮
       * @param flag true:禁用
       */
      disableAll(flag) {
        this.COStatus = flag;
        this.disableButton(flag);
      },
      validInput(text) {
        this.$nextTick(() => {
          let tip = document.getElementsByClassName('el-select-dropdown__empty');
          tip[0].style.color = "red";
          if (text.length > 0 && text.length < 4) {
            tip[0].innerText = '请输入任意四位Mac地址查询';
  
          } else {
            tip[0].innerText = '查询不到数据';
          }
        })
      },
      listInfraredSocket(val) {
        this.listInfraredSocket(val).then(res => {
          if (res.length > 0)
            this.infraredSocketOption = res;
        });
      },
      filterInfraredSocket(text) {
        this.infraredSocketOption = [];
        this.validInput(text);
        if (text.length >= 4) {
          this.listInfraredSocket(text);
        }
      },
      selectInfraredSocket(val) {
        this.infraredSocketOption = [];
        this.saveOrUpdateISR(val === "" ? null : val);
        // this.getLastTimeStatus(val);
      },
      clearDeviceId() {
        this.sweepWindShow = "";
        this.commonHandler(
          true
          , true
          , 'black'
          , false
          , false);
  
      },
      saveOrUpdateISR(infraSocketDeviceId) {
        console.log(infraSocketDeviceId)
        this.userOperateISR.infraSocketDeviceId = infraSocketDeviceId;
        insertOrUpdateRecord(this.userOperateISR).then(res => {
          if (res) {
            this.$message.success('用户操作红外记录已更新');
            return;
          }
          this.$message.error('操作记录更新失败！');
        });
      },
      generalSendInstruction(functionType, instructionType, temperate) {
        if (functionType === 0x15 && this.autoModel) {
          this.btnDisableDelay(2500);
          return;
        }
        this.getInstructionData(functionType);
        if (functionType !== 0x11){
          this.instructionVO.instructionData.push(instructionType);
        }
        temperate = isNaN(temperate) ? "" : temperate;
        if (temperate != null) {
          if (temperate === '') {
            this.instructionVO.instructionData.push(0x1d);
            this.upOrDownTemperatureShow(instructionType);
          } else {
            let number = Number(temperate);
            number = (number < 16 ? 16 : number) > 31 ? 31 : number;
            this.instructionVO.infraredSocketVO.temperature = number;
            this.instructionVO.instructionData.push(number & 0x0F);
            this.temperatureShow.value = temperate;
          }
        }
        this.sendInstruction(this.instructionVO);
        this.btnDisableDelay(2500);
      },
      upOrDownTemperatureShow(instructionType) {
        this.temperatureShow.value =
          instructionType === 0x00 ? ++this.temperatureShow.value : --this.temperatureShow.value;
      },
      isAutoModel() {
        getModel(this.instructionVO.infraredSocketVO.deviceId).then(res => {
          return res === 0;
        })
      },
      /**
       * 按钮禁用延时
       * @param millisecond
       * @description 每发送一个指令 服务端需要等待2s左右才能获得infraredSocket的上报的红外指令发送状态
       * 如果在2s内同时发送了多个指令 infraredSocket可能不会按照指令发送顺序返回指令结果，无法保证数据的可靠性。
       */
      btnDisableDelay(millisecond) {
        clearTimeout(delayDisableTimer);
        this.disableAll(true);
        const delayDisableTimer = setTimeout(() => {
          //查询红外状态
          // this.getLastTimeStatus(this.instructionVO.infraredSocketVO.deviceId);
          this.disableAll(false);
        }, millisecond);
      },
      /*封装统一的指令发送函数*/
      sendInstruction(o) {
        console.log(this.instructionVO)
        sendInfraredInstruction(o).then(res => {
        });
      },
      /*温度输入限制16-31之间*/
      numberChange() {
        let t = parseInt(this.instructionVO.infraredSocketVO.temperature);
        if (t < 16) {
          t = 16;
        }
        this.instructionVO.infraredSocketVO.temperature = Math.min(t, 31)
      },
      clearNumber() {
        this.instructionVO.infraredSocketVO.temperature = "";
      },
      /*添加遥控*/
      intelligentMatch() {
        this.generalSendInstruction(this.functionType.intelligentMatch, 0x00, null);
      },
      /*手动匹配*/
      handMatch() {
        let length = this.controlBrandId.length;
        if (length > 4) {
          this.$message.error("最多输入四个字符！");
          return;
        }
        this.handMatchHandler(length);
        this.generalSendInstruction(this.functionType.handMatch, this.controlBrandId, null);
      },
      handMatchHandler(length) {
        switch (length) {
          case 0:
            this.$message.error("请输入空调遥控kfid!");
            return;
          case 1:
            this.controlBrandId = "000" + this.controlBrandId;
            break;
          case 2:
            this.controlBrandId = "00" + this.controlBrandId;
            break;
          case 3:
            this.controlBrandId = "0" + this.controlBrandId;
            break;
        }
      },
      /**
       *电源 => 开 / 关
       */
      electricityPower(type) {
        switch (type.length) {
          case 0:
            this.$message.error("请输入空调品牌id!");
            return;
          case 1:
            type = "000" + type;
            break;
          case 2:
            type = "00" + type;
            break;
          case 3:
            type = "0" + type
            break;
        }
        this.generalSendInstruction(this.functionType.electricityPower, type, null);
      },
      /**
       * 模式
       */
      model(type) {
        this.$refs.model.$children.forEach(item => {
          if (item.$el.children[0].style.color === "rgb(64, 158, 255)") {
            item.$el.children[0].style = undefined;
          }
        })
        this.$refs.model.$children[type].$el.children[0].style.color = "#409eff";
        this.generalSendInstruction(this.functionType.model, type, null);
      },
      /**
       * 风速或者扫风模式
       * @param type
       */
      windSpeed(type) {
        this.windSpeedType(type)
        this.generalSendInstruction(this.functionType.windSpeed, type, null);
      },
      windSpeedType(type) {
        switch (type) {
          case 0x00:
            this.windSpeedShow = "AUTO";
            break;
          case 0x01:
            this.windSpeedShow = "LOW";
            break;
          case 0x02:
            this.windSpeedShow = "MIDD";
            break;
          case 0x03:
            this.windSpeedShow = "HIGH";
            break;
        }
      },
  
      /**
       * 通用扫风函数
       * @param xxClickCount 具体的clickCount对象
       * @param lastTimeExec 上一次执行的函数对象
       * @param methodName  当前方法名称 const常量
       * @param xxFunctionType 具体的functionType const常量
       * @param showConst 显示常量
       */
      generalSweepWindFunction(xxClickCount, lastTimeExec, methodName, xxFunctionType, showConst) {
        if (lastTimeExec.name === methodName) {
          switch (xxClickCount.count) {
            case 0:
              xxClickCount.count = 1;
              break;
            default:
              xxClickCount.count = 0;
              break;
          }
        } else {
          xxClickCount.count = 0;
          lastTimeExec.name = methodName;
        }
        this.generalSendInstruction(xxFunctionType, xxClickCount.count, null);
        this.sweepWindShow = xxClickCount.count === 0 ? showConst : '';
      },
      /**
       * 扫风
       */
      //自动风向
      autoDirect() {
        this.generalSweepWindFunction(
          this.auClickCount
          , this.lastTimeExecFunction
          , this.autoDirect.name
          , this.functionType.autoSweepWind
          , 'AUS'
        );
      },
      //手动风向
      handDirect() {
        this.generalSweepWindFunction(
          this.hdClickCount
          , this.lastTimeExecFunction
          , this.handDirect.name
          , this.functionType.handSweepWind
          , 'HAS'
        );
      },
      //上下扫风
      /*upDownDirect() {
        if (this.udClickCount > 4) {
          this.udClickCount = 0;
        }
        this.udClickCount = this.udClickCount === 3 ? ++this.udClickCount : this.udClickCount;
        this.generalSendInstruction(this.functionType.upDownSweepWind, this.udClickCount++, null);
      },*/
      upDownDirect() {
        this.generalSweepWindFunction(
          this.udClickCount
          , this.lastTimeExecFunction
          , this.upDownDirect.name
          , this.functionType.upDownSweepWind
          , 'UDS'
        );
      },
      //左右扫风
      /*leftRightDirect() {
        if (this.lrClickCount > 4) {
          this.lrClickCount = 0;
        }
        this.lrClickCount = this.lrClickCount === 3 ? ++this.lrClickCount : this.lrClickCount;
        this.generalSendInstruction(this.functionType.leftRightSweepWind, this.lrClickCount++, null);
      },*/
      leftRightDirect() {
        this.generalSweepWindFunction(
          this.lrClickCount
          , this.lastTimeExecFunction
          , this.leftRightDirect.name
          , this.functionType.leftRightSweepWind
          , 'LRS'
        );
      },
  
  
      /**
       *
       * @param limitNumber 温度限制 const
       * @param itType 升温/降温
       */
      generalTemperatureItTypeHandler(limitNumber, itType) {
        if (this.instructionVO.infraredSocketVO.temperature === limitNumber) {
          this.instructionVO.infraredSocketVO.temperature = limitNumber;
        } else if (this.instructionVO.infraredSocketVO.temperature !== '') {
          if (this.temperatureShow.value === this.instructionVO.infraredSocketVO.temperature) {
            switch (itType) {
              case 0x00:
                this.instructionVO.infraredSocketVO.temperature++;
                break;
              case 0x01:
                this.instructionVO.infraredSocketVO.temperature--;
                break;
            }
          }
        }
      },
      /**
       * 温度控制
       * @param itType 加温 / 降温
       */
      temperatureSetting(itType) {
        if (this.currentModel === 0x03) {
          this.$message.warning("送风模式不能设置温度！")
          return;
        }
        this.generalTemperatureItTypeHandler()
        if (itType === 0x00) {
          this.generalTemperatureItTypeHandler(31, itType)
        } else {
          this.generalTemperatureItTypeHandler(16, itType)
        }
        this.generalSendInstruction(this.functionType.temperatureControl,
          itType,
          this.instructionVO.infraredSocketVO.temperature
        );
      },
      /**
       * 根据指令类型获取data前缀
       * @param instructionType
       */
      getInstructionData(instructionType) {
        switch (instructionType) {
          case 0x11:
            this.instructionVO.instructionData = [0xe1, 0x03, instructionType];
            let data = this.controlBrandId;
            let d1 = "0x" + data.substring(0, 2);
            let d2 = "0x" + data.substring(2);
            this.instructionVO.instructionData.push(Number(d1))
            this.instructionVO.instructionData.push(Number(d2))
            break;
          case 0x14:
            this.instructionVO.instructionData = [0xe1, 0x03, instructionType];
            break;
          default:
            this.instructionVO.instructionData = [0xe1, 0x02, instructionType];
            break;
        }
  
      }
    }
  }
  </script>
  
  <style scoped>
  .infraredRemote {
    width: 580px;
    height: 690px;
    border-radius: 20px;
    border: 1px solid #8c939d;
    margin: auto;
    background-color: #a0cfff;
  }
  
  /*.infraredRemoteRight {
    width: 580px;
    height: 690px;
    border-radius: 20px;
    border: 1px solid #8c939d;
  }*/
  
  .top {
    border: 1px solid #8c939d;
    width: 400px;
    height: 200px;
    margin: 30px auto auto;
    background-color: #ebb563;
  }
  
  .bottom {
    border: 1px solid #8c939d;
    width: 400px;
    height: 200px;
    margin: 30px auto auto;
  }
  
  .general {
    width: 500px;
    height: 30px;
    margin: 15px auto auto;
    border: 1px solid #8c939d;
  }
  
  .el-col-15 {
    width: 48.5%;
  }
  
  .settingBtn {
    width: 91px;
  }
  
  .el-button--small {
    width: 67px;
  }
  
  .mainScreen {
    font-family: element-icons, fantasy;
    font-size: 40px;
    margin-top: 17px;
  }
  
  .el-icon-orange:before {
    content: "\E724";
    margin-left: -300px;
    font-size: 20px;
    color: #0051FFFF;
  }
  
  .el-icon-hot-water:before {
    content: "\e6ba";
    margin-right: -320px;
    font-size: 20px;
    color: red;
  }
  </style>
  